<template>
  <el-dialog
    title="新增组织机构"
    :visible.sync="dialogVisible"
    :before-close="cancel"
    :close-on-click-modal="false"
    class="vc-dialog-form"
    width="480px">

    <forms ref="addForm" :formConfig="formConfig" @change="changeData"/>

    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="cancel">取消</el-button>
      <el-button type="primary" size="small" :disabled="disabled" @click="save">保存</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: 'addOrg',
  props: ['dialogVisible', 'pid', 'lvl'],
  data () {
    return {
      formConfig: {
        labelWidth: '120px',
        items: [
          {
            title: '上级组织机构',
            key: 'pid',
            type: 'selectTree',
            group: [],
            expandedKeys: [],
            defaultProps: {
              id: 'id',
              label: 'name',
              children: 'children',
              isLeaf: 'isLeaf'
            },
            required: true,
            message: '请选择上级组织机构',
            change: this.handleChange
          },
          {
            title: '名称',
            key: 'name',
            maxlength: 20,
            required: true,
            message: '请输入名称'
          },
          {
            title: '简称',
            key: 'sname',
            maxlength: 10
          },
          {
            title: '编码',
            key: 'code',
            maxlength: 30,
            required: true,
            message: '请输入编码',
            rules: 'half'
          },
          {
            title: '类型',
            key: 'type',
            type: 'select',
            group: this.$store.state.dic.listFormat['ZZJGLX'],
            required: true,
            message: '请选择类型'
          },
          {
            title: '级别',
            key: 'lvl',
            type: 'select',
            group: this.$store.state.dic.listFormat['zzjgjb']
          },
          {
            title: '状态',
            key: 'state',
            type: 'radio',
            group: this.$store.state.dic.listFormat['ZZJGZT'],
            required: true,
            message: '请选择状态'
          },
          {
            title: '显示排序',
            key: 'showOrder',
            maxlength: 5,
            change: this.filterShowOrder
          }
        ],
        params: {}
      },
      disabled: false,
      currData: {}
    }
  },
  computed: {
    orgTreeData () {
      return this.$parent.orgTreeData || []
    }
  },
  watch: {
    dialogVisible (val) {
      if (!val) return
      this.disabled = false
      this.formConfig.params = {
        pid: this.pid,
        lvl: this.GLOBAL.number.addANum(this.lvl),
        state: this.GLOBAL.CONSTANTS.DEFAULT_ORG_STATE
      }
      this.$nextTick(() => { this.$refs.addForm && this.$refs.addForm.clearValidate() })
    },
    orgTreeData: {
      handler (val) {
        Object.assign(this.formConfig.items[0], {
          group: val,
          expandedKeys: val.length ? [val[0].id] : []
        })
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    /**
     * 上级组织机构选中值改变时触发
     */
    handleChange (val) {
      if (!val || !val.data) return
      Object.assign(this.formConfig.params, this.currData, {
        lvl: this.GLOBAL.number.addANum(val.data.lvl)
      })
      this.$nextTick(() => { this.$refs.addForm.clearValidate('lvl') })
    },
    /**
     * 保存
     */
    save () {
      if (this.disabled) {
        return
      }
      if (!this.$refs.addForm.save()) {
        return
      }
      this.disabled = true
      this.$api.addOrg({
        data: this.formConfig.params
      }).then(res => {
        if (!res.success) {
          this.disabled = false
          res.code == '10221' && this.$parent.getAllOrg(this.$parent.id)
          return
        }
        this.$emit('close', res.data || {})
        this.$notifyBox('新增成功', 'success')
      }).catch(() => {
        this.disabled = false
      })
    },
    /**
     * 取消
     */
    cancel () {
      this.$emit('close', false)
    },
    /**
     * 表单数据改变事件
     */
    changeData (data) {
      this.currData = JSON.parse(JSON.stringify(data))
    },
    /**
     * 过滤'显示排序'输入值
     */
    filterShowOrder (data) {
      this.$set(this.$refs.addForm.insideData, 'showOrder', this.GLOBAL.filter.filterNaN(data.showOrder))
    }
  }
}
</script>
